<template>
	<u-popup :show="visible" @close="close">
		<view class="datePicker">
			<view class="datePicker-header">
				<view class="datePicker-header-l" @click="close">取消</view>
				<view class="datePicker-header-title">选择时间</view>
				<view class="datePicker-header-r" @click="submit">确定</view>
			</view>
			<view class="uni-padding-wrap">
				<view>
					<view :class="type === 1 ? 'uni-title-ac uni-title' : 'uni-title'" @click="setType(1)">{{ startTime || '请选择开始时间' }}</view>
					<view class="uni-title-tx">至</view>
					<view :class="type === 2 ? 'uni-title-ac uni-title' : 'uni-title'" @click="setType(2)">{{ endTime || '请选择结束时间' }}</view>
				</view>
				
			</view>
			<view class="picker-view">
				<picker-view :indicator-style="indicatorStyle" :value="valueTime" @change="bindChange" class="picker-view" v-if="!loading">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
				</picker-view>
			</view>
			
		</view>
	</u-popup>
</template>

<script>
	export default {
		props:{
			value:{
				type: Array,
				default:()=> []
			}
		},
		data() {
			return {
				title: 'picker-view',
				years:[],
				months:[],
				days:[],
				visible: false,
				indicatorStyle: `height: 50px;`,
				type: 1, //1选择开始时间
				valueTime: [],
				startTime: '',
				endTime: '',
				loading: false
			}
		},
		created() {
			this.initTime()
		},
		methods: {
			//传入年份和月份 获取该年对应月份的天数
			getMonthDays(year,month){
			    var thisDate = new Date(year,month,0);  //当天数为0 js自动处理为上一月的最后一天
			    return thisDate.getDate();
			},
			initTime(status){
				const date = new Date()
				
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				
				const years = []
				const months = []
				const days = []
				
				this.years = []
				this.months = []
				this.days = []
				for (let i = 1990; i <= 2050; i++) {
					this.years.push(i)
				}
				for (let i = 1; i <= 12; i++) {
					this.months.push(i)
				}
				let d = this.getMonthDays(year,month)
				for (let i = 1; i <= d; i++) {
					this.days.push(i)
				}
				
				this.$nextTick(()=>{
					
					if(status == 2){
						if(this.type == 1) {
							let arr = this.startTime.split('-').map(i=>Number(i))
							this.valueTime = [arr[0] - 1990, arr[1] - 1, arr[2] - 1]
						}
						if(this.type == 2) {
							let arr = this.endTime.split('-').map(i=>Number(i))
							
							this.valueTime = [arr[0] - 1990, arr[1] - 1, arr[2] - 1]
							console.log('arr',this.valueTime)
						}
						this.loading = true
						setTimeout(()=>{
							this.loading = false
						})
					} else {
						//当前时间
						this.valueTime = [year - 1990, month - 1, day - 1]
						this.startTime = this.getTime(this.valueTime)
						this.endTime = this.getTime(this.valueTime)
					}
					
				})
			},
			show(startTime,endTime) {
				if(startTime) {
					this.startTime = startTime
					let arr = this.startTime.split('-').map(i=>Number(i))
					this.valueTime = [arr[0] - 1990, arr[1] - 1, arr[2] - 1]
				}
				if(endTime) {
					this.endTime = endTime
					
				}
				
				this.visible = true
			},
			close() {
				this.visible = false
			},
			submit(){
				this.close()
				this.$emit('confirm',[this.startTime,this.endTime])
			},
			getTime(e){
				let year = e[0] + 1990
				let month = e[1] >= 10 ? e[1] + 1 : '0' + (e[1] + 1)
				let day = e[2] >= 10 ? e[2] + 1 : '0' + (e[1] + 1)
				return `${year}-${month}-${day}`;
			},
			bindChange(e) {
				console.log('e',e)
				const val = e.detail.value
				if(this.type === 1) {
					this.startTime = this.getTime(val)
				} else {
					this.endTime = this.getTime(val)
				}
				this.days = []
				let d = this.getMonthDays(val[0] + 1990,val[1] + 1)
				for (let i = 1; i <= d; i++) {
					this.days.push(i)
				}
			},
			setType(e){
				this.type = e
				this.initTime(2)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.picker-view {
		width: 750rpx;
		height: 500rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
	.uni-padding-wrap {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
		&>view {
			width: 500rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #eee;
			border-radius: 30rpx;
			padding: 20rpx 20rpx;
			.uni-title {
				flex: 1;
				min-width: 0;
				text-align: center;
			}
		}
		
		.uni-title-tx {
			width: 80rpx;
			text-align: center;
			
		}
		.uni-title-ac {
			color: green;
		}
	}
	.datePicker-header {
		width: 100%;
		box-sizing: border-box;
		padding: 42rpx 24rpx;
		display: flex;
		align-items: center;
		.datePicker-header-l {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #999999;
		}
		.datePicker-header-title {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #292929;
			margin: 0 auto;
		}
		.datePicker-header-r {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #12B475;
		}
	}
</style>